<template>
  <Card class="task-content">
    <div class="task-state">
      <div class="task-state-desc">
        {{ handelState(obj.taskStatus) }}
      </div>
    </div>
    <!--   任务信息   -->
    <div class="task-content-title">
      <el-row :gutter="60" class="task-content-title-row">
        <el-col :span="6" class="task-content-title-item">
          <span>道路路段：<p style="color: #177DDC">{{ obj.roadSection }}</p></span>
        </el-col>
        <el-col :span="6">
          <span>编号：<p>{{ obj.taskCode }}</p></span>
        </el-col>
        <el-col :span="6">
          <span>计划完成时间：<p>{{ handelDate(obj.estimatedStartTime) }}</p></span>
        </el-col>
        <el-col :span="3">
          <span>状态: <p>{{ handelState(obj.taskStatus) }}</p></span>
        </el-col>
        <el-col :span="3" style="margin-top: -3px">
          <Button type="primary" v-if="showEdit" @click="editData(obj.id)" icon="ios-create-outline">编辑</Button>
        </el-col>
      </el-row>
      <el-row :gutter="60" class="task-content-title-row">
        <el-col :span="6">
          <span>优先级：<p>{{ handelPriority(obj.priority) }}</p></span>
        </el-col>
        <el-col :span="6">
          <span>联系人：<p>{{ obj.contactName + '(' + obj.contactPhone + ')' }}</p></span>
        </el-col>
        <el-col :span="6">
          <span>受理人：<p>{{ obj.acceptorName + '(' + obj.acceptorPhone + ')' }}</p></span>
        </el-col>
        <el-col :span="6"></el-col>
      </el-row>
    </div>
    <!--  工作进度    -->
    <div class="task-process">
      <div class="task-process-title">
        <span>工作流程</span>
      </div>
      <div class="task-process-current">
        <Steps :current="Number(obj.currFlow)" size="small">
          <Step title="道路修建任务创建" style="width: 14%"></Step>
          <Step title="修建需求下发" style="width: 12%"></Step>
          <Step title="修建方案上传" style="width: 12%"></Step>
          <Step title="派服务商" style="width: 12%"></Step>
          <Step title="施工前准备" style="width: 10%"></Step>
          <Step title="沟槽开挖" style="width: 10%"></Step>
          <Step title="管道施工" style="width: 12%"></Step>
          <Step title="管坑回填" style="width: 10%"></Step>
          <Step title="路基施工" style="width: 10%"></Step>
          <Step title="路面结构施工" style="width: 14%"></Step>
          <Step title="竣工验收" style="width: 10%"></Step>
          <Step title="确认完结" style="width: 10%"></Step>
          <Step title="任务结算" style="width: 10%"></Step>
        </Steps>
      </div>
    </div>
    <!--   评价   -->
    <div v-if="showStar" class="task-process-rate">
      <div class="task-process-rate-header">
        <span>评价结果</span>
      </div>
      <div class="task-process-rate-content">
        <el-rate
          v-model="rateValue"
          disabled
          show-score
          text-color="#000000"
          score-template="{value}星">
        </el-rate>
        <p>{{ rateContent }}</p>
      </div>
    </div>
  </Card>
</template>

<script>
import {mapActions} from 'vuex';
import Timer from '../../../../libs/timeUtil'

export default {
  name: "militaryRoadTask",
  props: {
    obj: {
      type: Object,
      default: () => {
      }
    },
  },
  data() {
    return {
      rateValue: 3.5,
      rateContent: '任务紧急，现场完成比较顺利，很满意！'
    }
  },
  computed: {
    showEdit() {
      if (this.obj.state !== 'finish' && this.obj.state !== 'close') {
        return true;
      }
      return false;
    },
    showStar() {
      if (this.obj.state === 'finish' || this.obj.state === 'close') {
        return true;
      }
      return false;
    }
  },
  methods: {
    ...mapActions('baseTask', ['updateIsEdit']),
    editData(id) {
      this.$router.push({
        name: 'operate',
        query: {
          id: id,
          taskType: this.obj.taskType
        },
        params: {
          data: this.obj
        }
      })
    },
    handelState(val) {
      return this.$dataInfo.taskStateObj[val];
    },
    handelPriority(val) {
      return this.$dataInfo.priorityObj[val];
    },
    handelDate(date) {
      return Timer.timestampToDate(date);
    },
    taskFuncTypeDict(taskFuncType) {
      switch (taskFuncType) {
        case 'in':
          return '入港';
          break;
        case 'out':
          return '出港';
          break;
      }
    }
  },
  watch: {
    state() {
      // this.state = this.obj.state;
      console.log(this.state)
    }
  },
  mounted() {
    // console.log(this.state)
  }
}
</script>

<style lang="less" scoped>
/deep/ .ivu-steps-item.ivu-steps-status-process .ivu-steps-title {
  color: #000000;
  font-size: 12px;
  vertical-align: middle;
  display: inline-block;
}

/deep/ .ivu-steps-item.ivu-steps-status-process .ivu-steps-head-inner {
  vertical-align: middle;
  display: inline-block;
}

/deep/ .ivu-steps-horizontal .ivu-steps-title:after {
  max-width: 160px;
}

/deep/ [data-v-b1c686c8] .ivu-steps {
  font-size: 0;
  width: 100%;
  line-height: 1.5;
}

/deep/ .ivu-steps {
  display: inherit;
  width: 100%;
  font-size: 0;
  line-height: 1.5;
}

/deep/ .el-rate__icon {
  font-size: 12px;
}

/deep/ .el-rate__text {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.65) !important;
  vertical-align: middle;
}

.task-content {
  margin-top: 38px;
  border: 1px solid #EFF2F8;
  padding: 10px 91px 0px 10px;
  position: relative;

  .task-state {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 86px;
    text-align: center;
    height: 80px;
    background-color: red;
    background: url("../../../../assets/images/normal.png");

    .task-state-desc {
      transform: rotateZ(42.5deg) translate(20.5px, 9px);
      color: #fff;
    }
  }

  .task-content-title {
    .task-content-title-row {
      margin-bottom: 0px;

      span {
        font-size: 12px;
        color: #888;
        font-weight: bold;
      }

      p {
        font-size: 12px;
        color: #333333;
        display: inline-block;
      }
    }

    .edit-btn {
      margin-top: 4px;
      width: 94px;
      height: 40px;
      background-color: #0A3D94;
      border: none;
      color: #FFFFFF;
      font-size: 12px;

    }
  }

  .task-process {
    margin-top: 10px;

    .task-process-title {
      /*font-family: PingFangSC-Medium;*/
      font-size: 12px;
      color: #000000;
    }

    .task-process-current {
      margin-top: 10px;
    }
  }

  .task-process-rate {
    margin-top: 10px;

    .task-process-rate-header {
      font-size: 12px;
      color: #000000;
    }

    .task-process-rate-content {
      margin-top: 10px;
      margin-bottom: 10px;

      > p {
        font-size: 12px;
        margin-top: 10px;
        color: #888;
      }
    }
  }
}
</style>
